<template>
  <div class="right_top_first_bar com_echarts" id="right_top_first_bar">
  </div>
</template>

<script>
import echarts from 'echarts';
import echartsrender from '../../../assets/js/jquery.echarts';
export default {
  name: 'right_top_first_bar',
  data () {
    return {
        id:"right_top_first_bar"
    }
  },
  created () {

  },
  mounted(){
      this.initchart();
  },
  methods:{
    initchart(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.id));

        var Name = ['医院', '基层医疗卫生机构', '其他机构'];
        var color = ['#fb734e', '#e32f46', '#94d96c', '#0bbcb7', '#1a9bfc', '#7049f0'];
        var data = {
            "2010年": [65, 60, 76.5],
            "2011年": [93, 93, 93.4],
            "2012年": [87, 87, 88.3],
            "2018年": [36, 36, 36.4],
        };

        var xAxisData = [];
        var data1 = [],
            data2 = [],
            data3 = [];
        for (var i in data) {
            xAxisData.push(i);
            data1.push(data[i][0])
            data2.push(data[i][1])
            data3.push(data[i][2])
        }

        var label = {
            normal: {
                show: false,
                position: 'right',
                distance: 10,
                formatter: function(param) {
                    return param.value + '%';
                },
                textStyle: {
                    color: '#ffffff',
                    fontSize: '16',
                }
            }
        };


        var series = [];
        for (var j = 1; j < 4; j++) {
            if (j == 1) {
                var symbolOffset = [-24, 0];
                var dataArr = data1
            } else if (j == 2) {
                var symbolOffset = [0, 0];
                var dataArr = data2
            } else if (j == 3) {
                var symbolOffset = [24, 0];
                var dataArr = data3
            }

            series.push({//中间柱子
                name: Name[j - 1],
                type: 'bar',
                stack: j,
                xAxisIndex: 0,
                data: dataArr,
                label: label,
                barWidth: '4%',
                barGap: '500%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: color[j * 2 - 2]
                        }, {
                            offset: 1,
                            color: color[j * 2 - 1]
                        }]),
                    }
                },
                z: 2
            }, {//点
                name: Name[j - 1],
                type: 'scatter',
                stack: j,
                xAxisIndex: 0,
                symbolOffset: symbolOffset, //相对于原本位置的偏移量
                data: [0, 0, 0, 0],
                label: {
                    normal: {
                        show: false,
                    }
                },
                xAxisIndex: 2,
                symbolSize: 6,
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 2,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: color[j * 2 - 2]
                        }, {
                            offset: 1,
                            color: color[j * 2 - 1]
                        }]),
                        opacity: 1,
                    }
                },
                z: 2
            }, {//黑色柱子
                name: Name[j - 1],
                type: 'bar',
                xAxisIndex: 1,
                barGap: '100%',
                data: [dataArr[0] + 15, dataArr[1] + 15, dataArr[2] + 15, dataArr[3] + 15, ],
                barWidth: '12%',
                itemStyle: {
                    normal: {
                        color: '#0e2147',
                        barBorderRadius: 5,
                    }
                },
                z: 1
            }, {//外框
                name: Name[j - 1],
                type: 'bar',
                xAxisIndex: 2,
                data: [dataArr[0] + 15.5, dataArr[1] + 15.5, dataArr[2] + 15.5, dataArr[3] + 15.5, ],
                barWidth: '16%',
                barGap: '50%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: color[j * 2 - 2]
                        }, {
                            offset: 1,
                            color: color[j * 2 - 1]
                        }]),
                        barBorderRadius: 5,
                    }
                },
                z: 0
            }, {
                name: Name[j - 1],
                type: 'scatter',
                hoverAnimation: false,
                data: [1.2, 1.2, 1.2, 1.2],
                xAxisIndex: 2,
                symbolOffset: symbolOffset, //相对于原本位置的偏移量
                symbolSize: 6,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: color[j * 2 - 2]
                        }, {
                            offset: 1,
                            color: color[j * 2 - 1]
                        }]),
                        opacity: 1,
                    }
                },
                z: 2
            })
        }
        var option = {
            grid: {
                left: '3%',
                right: '3%',
                bottom: '15%',
                top: '10%',
                containLabel: true
            },
            tooltip: {
                show: "true",
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    shadowStyle: {
                        color: 'rgba(112,112,112,0)',
                    },
                },
                // formatter: '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%',
                formatter: function(params) {
                    var unit = params[0].name.substring(params[0].name.indexOf('(') + 1, params[0].name.indexOf(')'));
                    return params[0].name + ' ：<br />' + params[0].seriesName + ' ：' + params[0].data + unit + '<br />' + params[1].seriesName + ' ：' + params[1].data + unit + '<br />' + params[2].seriesName + ' ：' + params[2].data + unit;
                },
                backgroundColor: 'rgba(0,0,0,0.7)', // 背景
                padding: [8, 10], //内边距
                extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
            },
            legend: {
                bottom: '2%',
                textStyle: {
                    color: '#fff',
                },
                data: Name,
            },
            xAxis: [{
                type: 'category',
               axisLine: { //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#0ec1ff'
                    },
                },
                axisLabel: { //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: 'rgba(255,255,255,0.7)',
                        margin: 15,
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xAxisData
            }, {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: xAxisData
            }, {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitArea: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                data: xAxisData
            }],
            yAxis: {
                type: 'value',
                splitNumber: 5,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#0a3256'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#0ec1ff'
                    },
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: 'rgba(255,255,255,0.7)',

                    },
                },
                axisTick: {
                    show: false,
                }
            },
            series: series
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  }
}
</script>
<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:100%;
    height:100%;
}
</style>
